<!--工序作业指导书管理-->
<!--用户权限说明-->
<!--管理员：代码：1:可以做所有的操作；
               2:可以添加作业指导书以及所有修改作业指导书的权限；
               3：只能编辑作业指导书，但是不能新加
               4：可以编辑作业指导书，但是不能编辑关联控制计划
               5：只能编审批会签，但是不能修改
               6：只能查看，不能编辑-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">工序作业指导书管理</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="margin-bottom: 10px">
            <el-card class="box-card">
              <div slot="header" class="clearfix" style="text-align: left">
                <span>选择提示：</span>
              </div>
              <div style="text-align: left">
                <div style="color: red;font-size: 16px" ><strong>{{titleMianId}}</strong></div>
                <div style="color: red;font-size: 16px" ><strong>{{titleMianOp}}</strong></div>
              </div>
            </el-card>
          </div>
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              style="width: 160px">
          </el-input>
          <el-tree
              style="margin: 10px 8px;"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              @node-click="treeClick"
              :filter-node-method="filterNode"
              ref="tree"
              highlight-current></el-tree>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="overflow-y: auto;overflow-x: auto; height: 79vh">
            <div style="display: flex;height: 75vh;margin-top: 10px">
              <div style="width: 220px; border: 1px solid blue; box-sizing: border-box;overflow-y: auto">
                <div style="margin-top: 10px;text-align: center">
                  <span style="color: red;font-size: 18px">表单信息</span>
                  <div v-if="usePower===1 || usePower==='1'">
                    <el-link style="margin-left: 10px" @click="editTable(1)"><i class="el-icon-circle-plus-outline"></i></el-link>
                    <el-link style="margin-left: 10px" @click="editTable(2)"><i class="el-icon-edit"></i></el-link>
                    <el-link style="margin-left: 10px" @click="editTable(3)"><i class="el-icon-delete"></i></el-link>
                  </div>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span v-if="tableDataTemp.lineName===''"></span>
                  <span v-else-if="languageS==='chinese'">线体名称：{{tableDataTemp.lineName.split('/')[0]}}</span>
                  <span v-else-if="languageS==='english'">线体名称：{{tableDataTemp.lineName.split('/')[1]}}</span>
                  <span v-else-if="languageS==='russian'">线体名称：{{tableDataTemp.lineName.split('/')[2]}}</span>
                  <hr>
                </div>
                <div style="margin:8px;text-align: left">
                  <span>工序号：{{tableDataTemp.op}}</span>
                  <hr>
                </div>
                <div style="margin:8px;width: 150px">
                  <div v-if="tableDataTemp.fileName===''"></div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                       v-else-if="languageS==='chinese' && tableDataTemp.fileName.split('|*|').length===3">{{tableDataTemp.fileName.split('|*|')[0]}}</div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                       v-else-if="languageS==='english' && tableDataTemp.fileName.split('|*|').length===3">{{tableDataTemp.fileName.split('|*|')[1]}}</div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                       v-else-if="languageS==='russian' && tableDataTemp.fileName.split('|*|').length===3">{{tableDataTemp.fileName.split('|*|')[2]}}</div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                       v-else>{{tableDataTemp.fileName}}</div>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>版本号：最新</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span >编制日期：</span>
                  <span>{{tableDataTemp.writeDate}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>执行日期：</span>
                  <span>{{tableDataTemp.executeDate}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>文件编号：</span>
                  <span>{{tableDataTemp.fileNum}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>编制：</span>
                  <span>{{tableDataTemp.writeUse}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>审核：</span>
                  <span @click="ratifyClick(1)" >{{tableDataTemp.examineUse}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>批准：</span>
                  <span @click="ratifyClick(2)">{{tableDataTemp.ratifyUse}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>会签：</span>
                  <span @click="ratifyClick(3)">{{tableDataTemp.countersignUse}}</span>
                  <hr>
                </div>
              </div>
              <div style="flex-grow: 1;
                  border: 1px solid blue;
                  box-sizing: border-box;
                  margin-left: 8px;
                  padding: 8px;
                  display: flex;
                  width: 100%">
                <div style="flex: 1;height: 75vh;scroll-margin-right: 8px;overflow-x: auto">
                  <div style="text-align: left;">
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard1 , color:workBookHeardColour1, padding: '4px 10px', borderRadius: '5px' }"
                              @click="workBookHeard(1)">要领书/指导书</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard2 , color:workBookHeardColour2, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(2)">零部件明细</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard3 , color:workBookHeardColour3, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(3)">失效案例库</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard4 , color:workBookHeardColour4, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(4)">工时</el-link>
                  </div>
                  <hr>
                  <div v-if="workBookHeardUse===1">
                    <el-table
                        :data="workBook"
                        border
                        style="width: 100%;margin-top: 5px"
                        height="66vh"
                        highlight-current-row
                        @expand-change="workBookRowClick">
                      <el-table-column
                          type="expand"
                          v-slot:default="props">
                        <div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>注意点说明：</span>
                            <span v-if="languageS==='chinese' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.problem}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>品质检查：</span>
                            <span v-if="languageS==='chinese' && props.row.inspect.split('|*|').length===3">{{props.row.inspect.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.inspect.split('|*|').length===3">{{props.row.inspect.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.inspect.split('|*|').length===3">{{props.row.inspect.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.inspect}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <div>控制计划要求：<el-link @click="editBook(6,props)"><i class="el-icon-edit"></i></el-link></div>
                            <hr>
                            <div style="width: 100%;" v-if="isControlPlanLoad">
                              <el-table
                                  :data="controlPlanData"
                                  style="width: 100%"
                                  size="mediut">
                                <el-table-column
                                    label="产品/过程规范/公差"
                                    width="250px"
                                    prop="specification"
                                    fixed
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.specification}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.specificationEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.specificationRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="评价"
                                    width="100px"
                                    prop="measure"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.measure}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.measureEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.measureRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="容量"
                                    width="100px"
                                    prop="capacity"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.capacity}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.capacityEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.capacityRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="频率"
                                    width="100px"
                                    prop="frequency"
                                    v-slot:default="scope">
                                  <span v-if="languageS==='chinese'">{{scope.row.frequency}}</span>
                                  <span v-if="languageS==='english'">{{scope.row.frequencyEnglish}}</span>
                                  <span v-if="languageS==='russian'">{{scope.row.frequencyRussian}}</span>
                                </el-table-column>
                                <el-table-column
                                    label="控制方法"
                                    width="100px"
                                    prop="method"></el-table-column>
                              </el-table>
                            </div>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>工具：</span>
                            <span v-if="languageS==='chinese' && props.row.toll.split('|*|').length===3">{{props.row.toll.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.toll.split('|*|').length===3">{{props.row.toll.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.toll.split('|*|').length===3">{{props.row.toll.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.toll}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>设备：</span>
                            <span v-if="languageS==='chinese' && props.row.device.split('|*|').length===3">{{props.row.device.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.device.split('|*|').length===3">{{props.row.device.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.device.split('|*|').length===3">{{props.row.device.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.device}}</span>
                          </div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>辅料：</span>
                            <span v-if="languageS==='chinese' && props.row.accessories.split('|*|').length===3">{{props.row.accessories.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && props.row.accessories.split('|*|').length===3">{{props.row.accessories.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && props.row.accessories.split('|*|').length===3">{{props.row.accessories.split('|*|')[2]}}</span>
                            <span v-else>{{props.row.accessories}}</span>
                          </div>
                        </div>
                      </el-table-column>
                      <el-table-column
                          v-slot:default="scope"
                          label="序号"
                          width="50">
                        {{scope.$index+1}}
                        <template v-if="usePower===1 || usePower==='1'">
                          <el-link @click="editBook(2,scope)"><i class="el-icon-download"></i></el-link>
                        </template>
                      </el-table-column>
                      <el-table-column
                          prop="work"
                          label="步骤内容"
                          v-slot:default="scope">
                        <div>
                          <span @click="editBook(100,scope)" v-if="languageS==='chinese' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[0]}}</span>
                          <span @click="editBook(100,scope)" v-else-if="languageS==='english' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[1]}}</span>
                          <span @click="editBook(100,scope)" v-else-if="languageS==='russian' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[2]}}</span>
                          <span @click="editBook(100,scope)" v-else>{{scope.row.work}}</span>
                          <span @click="editBook(100,scope)">--{{scope.row.spendTime}}S</span>
                          <template v-if="usePower===1 || usePower==='1'">
                            <el-link style="margin-left: 20px" @click="editBook(1,scope)"><i class="el-icon-edit"></i></el-link>
                            <el-link style="margin-left: 10px" @click="editBook(4,scope)"><i class="el-icon-picture-outline"></i></el-link>
                            <el-link style="margin-left: 10px" @click="editBook(5,scope)"><i class="el-icon-video-camera"></i></el-link>
                            <el-link style="margin-left: 10px" @click="editBook(3,scope)"><i class="el-icon-delete"></i></el-link>
                          </template>
                        </div>

                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-if="workBookHeardUse===2">
                    <div style="text-align: right" v-if="usePower===1 || usePower==='1'">
                      <el-link style="color: red" v-if="partsListData.length===0" @click="editPartsList(5,null)" >新建</el-link>
                    </div>
                    <el-table
                        :data="partsListData"
                        border
                        style="width: 100%;margin-top: 5px"
                        height="65vh"
                        highlight-current-row
                        @row-click="partsListClick">
                      <el-table-column
                          type="expand"
                          v-slot:default="props">
                        <div>
                          <div style="margin-right: 10px;margin-left: 15px;margin-bottom:8px;border: 1px solid blue;padding: 5px">
                            <span>特殊特性：</span>
                            <span>{{props.row.special}}</span>
                          </div>
                        </div>
                      </el-table-column>
                      <el-table-column
                          v-slot:default="scope"
                          label="图示代码"
                          width="50">
                        {{scope.row.mapId}}
                      </el-table-column>
                      <el-table-column
                          prop="stepNum"
                          width="50"
                          label="工步号">
                      </el-table-column>
                      <el-table-column
                          prop="partName"
                          label="零部件名称"
                          width="120"
                          v-slot:default="scope">
                        <span v-if="scope.row.partName.split('/').length===4 && languageS==='chinese'">
                          {{scope.row.partName.split('/')[1]}}
                        </span>
                        <span v-else-if="scope.row.partName.split('/').length===4 && languageS==='english'">
                          {{scope.row.partName.split('/')[2]}}
                        </span>
                        <span v-else-if="scope.row.partName.split('/').length===4 && languageS==='russian'">
                          {{scope.row.partName.split('/')[3]}}
                        </span>
                        <span v-else-if="scope.row.partName.split('|*|').length===3 && languageS==='chinese'">
                          {{scope.row.partName.split('|*|')[0]}}
                        </span>
                        <span v-else-if="scope.row.partName.split('|*|').length===3 && languageS==='english'">
                          {{scope.row.partName.split('|*|')[1]}}
                        </span>
                        <span v-else-if="scope.row.partName.split('|*|').length===3 && languageS==='russian'">
                          {{scope.row.partName.split('|*|')[2]}}
                        </span>
                        <span v-else>
                          {{scope.row.partName}}
                        </span>
                      </el-table-column>
                      <el-table-column
                          prop="partId"
                          label="零部件图号"
                          v-slot:default="scope">
                        <span v-if="scope.row.partName.split('/').length===4">
                          {{scope.row.partName.split('/')[0]}}
                        </span>
                      </el-table-column>
                      <el-table-column
                          prop="partNum"
                          label="数量"
                          width="50">
                      </el-table-column>
                      <el-table-column
                          label="编辑"
                          v-slot:default="scope" v-if="usePower===1 || usePower==='1'">
                        <div>
                          <el-link style="margin-left: 5px" @click="editPartsList(1,scope)"><i class="el-icon-edit"></i></el-link>
                          <el-link style="margin-left: 10px" @click="editPartsList(2,scope)"><i class="el-icon-download"></i></el-link>
                          <el-link style="margin-left: 10px" @click="editPartsList(4,scope)"><i class="el-icon-picture-outline"></i></el-link>
                          <el-link style="margin-left: 10px" @click="editPartsList(3,scope)"><i class="el-icon-delete"></i></el-link>
                        </div>

                      </el-table-column>
                    </el-table>
                  </div>
                  <div v-if="workBookHeardUse===3">
                    <div v-if="usePower===1 && caseUseData.length===0">
                      <el-link @click="caseUseShow(1,null)">新建</el-link></div>
                    <div>
                      <el-table
                          :data="caseUseData"
                          border
                          style="width: 100%">
                        <el-table-column
                            prop="id"
                            label="序号"
                            width="50"
                            v-slot:default="scope">
                          <span>{{scope.row.id+1}}</span>
                          <template v-if="usePower===1 || usePower==='1'">
                            <el-link @click="caseUseShow(6,scope)"><i class="el-icon-download"></i></el-link>
                          </template>
                        </el-table-column>
                        <el-table-column
                            prop="caseUse"
                            label="案例描述"
                            v-slot:default="scope">
                          <span>{{scope.row.caseUse}}</span>
                          <template v-if="usePower===1 || usePower==='1' || caseUseData.length>0">
                            <el-link style="margin-left: 20px" @click="caseUseShow(2,scope)"><i class="el-icon-edit"></i></el-link>
                            <el-link style="margin-left: 10px" @click="caseUseShow(4,scope)"><i class="el-icon-picture-outline"></i></el-link>
                            <el-link style="margin-left: 10px" @click="caseUseShow(5,scope)"><i class="el-icon-video-camera"></i></el-link>
                            <el-link style="margin-left: 10px" @click="caseUseShow(3,scope)"><i class="el-icon-delete"></i></el-link>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <div v-if="workBookHeardUse===4" ref="myChartBor" style="height: 66vh;width:35vw">
                  </div>
                </div>
                <div style="flex: 1;">
                  <el-card shadow="hover" style="height: 72vh;margin-left: 8px">
                    <div style="width: 100%;height: 62vh;margin-top: -8px;text-align: left;">
                      <el-link :style="{ backgroundColor:videoAndImage1 , color:videoAndImageColor1 , padding: '4px 10px', borderRadius: '5px' }"
                               @click="videoAndImage(1)">图片</el-link>
                      <span style="margin-left: 8px;margin-right: 8px">|</span>
                      <el-link :style="{ backgroundColor:videoAndImage2 , color:videoAndImageColor2 , padding: '4px 10px', borderRadius: '5px' }"
                               @click="videoAndImage(2)">视频</el-link>
                      <hr>
                      <div class="block">
                        <el-carousel trigger="click" height="62vh" v-if="editVideoAndImageUse===1">
                          <el-carousel-item v-for="(item, index) in itemView" :key="index">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="item"
                                fit='contain'
                                @click="handleImageClick(item)">
                            </el-image>
                          </el-carousel-item>
                        </el-carousel>
                        <el-carousel trigger="click" height="62vh" :autoplay="false" v-if="editVideoAndImageUse===2">
                          <el-carousel-item v-for="(item, index) in itemViewVideo" :key="index">
                            <video
                                style="width: 100%; height: 100%"
                                :src="item"
                                controls></video>
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--业指导书表头编辑的弹窗-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogTableHeader"
        width="30%"
        :before-close="handleClose">
      <el-form ref="formTableData" status-icon :rules="rulesForm" :model="formTableData" label-width="80px">
        <el-form-item label="车间名称" prop="workshop">
          <el-select v-model="formTableData.workshop" placeholder="请选择" disabled style="width: 100%" @change="(val) => selectChange(val, 1)">
            <el-option
                v-for="item in optionWorkshop"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品图号" prop="workshop">
          <el-input v-model="formTableData.productId" disabled></el-input>
        </el-form-item>
        <el-form-item label="线体名称" prop="lineName">
          <el-select
              v-model="formTableData.lineName"
              placeholder="请选择"
              style="width: 100%"
              :disabled="disabledLineName">
            <el-option
                v-for="item in optionLine"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex; /* 启用 Flexbox 布局 */justify-content: space-between; /* 子元素之间的间隔平均分布 */  ">
          <el-form-item label="工序号" style="flex:1" prop="op">
            <el-select
                v-model="formTableData.op"
                placeholder="请选择"
                style="width: 100%"
                disabled>
              <el-option
                  v-for="item in optionOp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="版本号" style="flex:1" prop="editionNum">
            <el-select
                v-model="formTableData.editionNum"
                placeholder="请选择"
                style="width: 100%">
              <el-option
                  v-for="item in optionEditionNum"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="文件名称" prop="fileName">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容,语言使用“|*|”符号分割"
              v-model="formTableData.fileName">
          </el-input>
        </el-form-item>
        <el-form-item label="编制日期" prop="writeDate">
          <el-date-picker
              v-model="formTableData.writeDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="执行日期" prop="executeDate">
          <el-date-picker
              v-model="formTableData.executeDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <div style="font-size: 18px;color: #0269fa;margin-bottom: 10px">指定相关人员</div>
        <div style="display: flex; /* 启用 Flexbox 布局 */justify-content: space-between; /* 子元素之间的间隔平均分布 */  ">
          <el-form-item label="编制人" style="flex:1" prop="writeUse">
            <el-input  :placeholder="useName" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item  label="审核人" style="flex:1" prop="examineUse">
            <el-input v-model="formTableData.examineUse" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; /* 启用 Flexbox 布局 */justify-content: space-between; /* 子元素之间的间隔平均分布 */  ">
          <el-form-item label="会签人" style="flex:1" prop="countersignUse">
            <el-input v-model="formTableData.countersignUse" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item  label="批准人" style="flex:1" prop="ratifyUse">
            <el-input v-model="formTableData.ratifyUse" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="提交结果">
          <el-button type="primary" @click="onSubmit(editTableUse,'formTableData')">立即创建</el-button>
          <el-button @click="dialogTableHeader=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--零部件列表编辑的弹窗-->
    <el-dialog
        :title="titleUse"
        :visible.sync="partsListDialog"
        width="600px"
        :before-close="handleClose">
      <el-form ref="partsListFrom" status-icon :model="partsListFrom" label-width="80px">
        <el-form-item label="零件名称">
          <el-select v-model="partsListFrom.partName" filterable placeholder="请选择" style="width: 100%">
            <el-option
                v-for="item in partsListOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="装配数量">
          <el-input-number style="width: 100%" v-model="partsListFrom.partNum" aria-placeholder="请输入数量"></el-input-number>
        </el-form-item>
        <el-form-item label="附加信息" prop="workshop">
          <el-input v-model="partsListFrom.mapId" placeholder="图示代码" style="width: 150px;margin-right: 15px"></el-input>
          <el-input v-model="partsListFrom.stepNum" placeholder="工步号" style="width: 150px;margin-right: 15px"></el-input>
          <el-input v-model="partsListFrom.special" placeholder="特殊特性" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item label="提交结果">
          <el-button type="primary" @click="partsListEditClick">立即创建</el-button>
          <el-button @click="partsListDialog=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--输入多个文本的弹窗类型-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleText"
        width="50%"
        :before-close="handleClose">
      <div style="text-align: left">
        <div style="overflow: hidden;">
          <div style="float: left; width: 45%; text-align: left;">
            <span style="font-size: 18px;color: red">操作步骤：</span>
          </div>
          <div style="float: right; width: 45%; text-align: right;">
            <span>工步用时(单位S）</span><el-input-number v-model="inputNum" :min="0" :max="200"></el-input-number>
          </div>
        </div>
        <el-input placeholder="请输入内容"
                  v-model="inputText1"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">关注点：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText2"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">品质检查：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText3"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">设备名称：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText4"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="2"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">辅料名称：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText5"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="2"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">工具名称：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText6"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="2"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleText = false">取 消</el-button>
    <el-button type="primary" @click="saveDataTextTwo">确 定</el-button>
  </span>
    </el-dialog>
    <!--做控制计划选择的弹框-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleControl"
        width="80%"
        :before-close="handleClose">
      <div style="display: flex; width: 100%;height: 500px">
        <div style="width: 300px;  border: 1px solid blue;margin-right: 10px;height: 100%;overflow-y: auto">
          <el-tree :data="treeControl" :props="defaultProps" @node-click="controlTreeClick" ></el-tree>
        </div>
        <div style="flex-grow: 1;  border: 1px solid blue;overflow-x: auto;overflow-y: auto">
          <el-table
              ref="multipleTable"
              :data="tableDataControl"
              style="width: 100%"
              height="100%"
              size="mediut"
              @selection-change="controlPlanSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="operation"
                label="过程名称/操作描述"
                width="150">
            </el-table-column>
            <el-table-column
                prop="device"
                label="机器、装置、夹具、工装"
                width="150">
            </el-table-column>
            <el-table-column label="特性">
              <el-table-column
                  prop="numberOrder"
                  label="编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="product"
                  label="产品"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="processUse"
                  label="过程"
                  width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column
                prop="characteristic"
                label="特殊特性分类"
                width="120">
            </el-table-column>
            <el-table-column
                label="方法"
                style="text-align: center">
              <el-table-column
                  label="产品/过程规范/公差"
                  width="250px"
                  prop="specification"
                  fixed></el-table-column>
              <el-table-column
                  label="评价/测量技术"
                  width="100px"
                  prop="measure"></el-table-column>
              <el-table-column
                  label="容量"
                  width="100px"
                  prop="capacity"></el-table-column>
              <el-table-column
                  label="频率"
                  width="100px"
                  prop="frequency"></el-table-column>
              <el-table-column
                  label="控制方法"
                  width="100px"
                  prop="method"></el-table-column>
              <el-table-column
                  label="责任部门"
                  width="100px">
              </el-table-column>
            </el-table-column>
            <el-table-column
                label="反应计划"
                width="100px"
                prop="reaction"></el-table-column>
            <el-table-column label="编辑" width="220px">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loadSelect">加载以前关联</el-button>
    <el-button @click="dialogVisibleControl = false">取 消</el-button>
    <el-button type="primary" @click="saveDataControl">确 定</el-button>
  </span>
    </el-dialog>
    <!--点击上传照片(作业指导书中）-->
    <el-dialog
        :visible.sync="dialogPicture"
        :title="titleUse">
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileAnnex(file, fileList)"
            :file-list="PictureList"
            :accept="fileType">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!--点击上传视频（作业指导书中）-->
    <el-dialog
        :visible.sync="dialogVideo"
        :title="titleUse">
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileAnnex(file, fileList)"
            :file-list="videoList"
            :accept="fileType"
            v-loading="loading"
            element-loading-text="拼命上传中">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <video width="100%"
                   height="100%"
                   :src="file.url"
                   controls>
            </video>
            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!--点击上传照片(零部件明细中）-->
    <el-dialog
        :visible.sync="dialogPicturePart"
        :title="titleUse">
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileAnnexPart(file, fileList)"
            :file-list="PictureList"
            :accept="fileType">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemovePart(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!--点击上传照片中的放大按钮，查看照片-->
    <el-dialog :visible.sync="dialogPictureAnnex">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!--编辑失效案例的弹窗-->
    <el-dialog
        :title="titleUse"
        :visible.sync="caseUseDialog"
        width="50%"
        :before-close="handleClose">
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">案例描述：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputTextCaseUse"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="caseUseDialog = false">取 消</el-button>
    <el-button type="primary" @click="caseUseEdit">确 定</el-button>
  </span>
    </el-dialog>
    <!--抽屉放置区域-->
    <el-drawer
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="rtl"
        size="50%">
      <el-table
          :data="tableData"
          style="width: 100%;margin-left: 25px;margin-right: 25px"
          highlight-current-row="highlight-current-row">
        <el-table-column
            prop="workshop"
            label="车间名称"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{scope.row.workshop.split('/')[0]}}</span>
            <span v-else-if="languageS==='english'">{{scope.row.workshop.split('/')[1]}}</span>
            <span v-else-if="languageS==='russian'">{{scope.row.workshop.split('/')[2]}}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="lineName"
            label="线体名称"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{scope.row.lineName.split('/')[0]}}</span>
            <span v-else-if="languageS==='english'">{{scope.row.lineName.split('/')[1]}}</span>
            <span v-else-if="languageS==='russian'">{{scope.row.lineName.split('/')[2]}}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="op"
            label="工序"
            sortable
            width="80"
            :formatter="formatter"
            v-slot="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            {{scope.row.op}}
          </div>
        </el-table-column>
        <el-table-column
            prop="fileName"
            label="文件名称"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[0]}}</span>
            <span v-else-if="languageS==='english' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[1]}}</span>
            <span v-else-if="languageS==='russian' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[2]}}</span>
            <span v-else>{{scope.row.fileName}}</span>
          </div>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>

import _ from "lodash";
import {
  filepath,
  machiningAssembly,
  OpAssembly,
  optionWorkshop, partListOptions,
  tree_workshop_product_op_chinese,
  tree_workshop_product_op_english,
  tree_workshop_product_op_russian,
  workshopAssembly
} from "@/configUse";
import * as echarts from "echarts";

export default {
  name: "operateGuideBook",
  data() {
    //校验数据是否为空
    var dataNull = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('数据不能为空，请输入/选择'));
      }
      callback();
    }
    return {
      activeName:'first',
      //记录控制计划弹窗的树形导航结构
      treeControl:tree_workshop_product_op_chinese,
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
      //语言选择的变量
      languageS:'chinese',
      //主导航上的提示
      titleMianId:'未选择产品',
      titleMianOp:'未选择工序',

      homepageName:'俄罗斯动力质量管理系统',//主页变化的语言选择
      //用在显示不同的样式部分
      //左侧的作业指导书按钮的样式
      background1:'',
      background2:'',
      background3:'',

      //新导航用到的变量
      //导航筛选的变量
      filterText:'',
      // 导航的目录
      treeList:tree_workshop_product_op_chinese,
      //树形的导航用到的数据模板
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //点击的树形结构内容Data
      treeData:null,
      //点击的树形结构内容
      treeNode:null,

      //用作作业指导书表头部分的选择
      workBookHeard1:'#0269fa',
      workBookHeard2:'',
      workBookHeard3:'',
      workBookHeard4:'',
      workBookHeardColour1:'white',
      workBookHeardColour2:'',
      workBookHeardColour3:'',
      workBookHeardColour4:'',

      //图片、视频切换的按钮样式变量
      videoAndImage1:'#0269fa',
      videoAndImage2:'',
      //图片、视频切换的按钮颜色变化
      videoAndImageColor1:'white',
      videoAndImageColor2:'',


      //抽屉用到的变量
      //控制抽屉的表头
      drawerTitle:'',
      //控制抽屉打开
      drawer:false,
      //数据大表，记录工序作业指导书的
      tableData:[
        {
          //主键
          id:'',
          //车间名称
          workshop:'',
          //线体名称
          lineName:'',
          //工序名称
          op:'',
          //文件名称
          fileName:'',
          //版本号
          editionNum:'',
          //编制日期
          writeDate:'',
          //执行日期
          executeDate:'',
          //文件编号
          fileNum:'',
          //编制
          writeUse:'',
          //审核
          examineUse:'',
          //批准
          ratifyUse:'',
          //会签
          countersignUse:'',
          //作业指导书
          workBook:'',
          //产品图号
          productId:'',
          //视频附件
          BookVideo:'',
          //设备配合动作分解
          deviceTime:'',
          //修改记录
          editRecord:'',
          //控制计划标记位
          controlSign:'',
          //三不检验指导书标记位
          threeBookSign:'',
          //装配零部件明细
          partsList:'',
          //指导书类型
          bookType:'',
          //失效案例
          caseUse:'',
          //删除标记位
          deleteSign:'',
          //创建时间
          establishTime:'',
          //修改时间
          UpdateTime:'',
        }
      ],
      //编辑大表的临时中转变量
      tableDataTemp: {
        //主键
        id: '',
        //车间名称
        workshop: '',
        //线体名称
        lineName: '',
        //工序名称
        op: '',
        //文件名称
        fileName: '',
        //版本号
        editionNum: '',
        //编制日期
        writeDate: '',
        //执行日期
        executeDate: '',
        //文件编号
        fileNum: '',
        //编制
        writeUse: '',
        //审核
        examineUse: '',
        //批准
        ratifyUse: '',
        //会签
        countersignUse: '',
        //作业指导书
        workBook: '',
        //产品图号
        productId: '',
        //视频附件
        bookVideo: '',
        //修改记录
        editRecord: '',
        //控制计划标记位
        controlSign: '',
        //三不检验指导书标记位
        threeBookSign: '',
        //装配零部件明细
        partsList: '',
        //指导书类型
        bookType: '',
        //删除标记位
        deleteSign: '',
        //创建时间
        establishTime: '',
        //修改时间
        UpdateTime: '',
      },
      //表单输入的控件变量
      formTableData:{
        //主键
        id: '',
        //车间名称
        workshop: '',
        //线体名称
        lineName: '',
        //工序名称
        op: '',
        //文件名称
        fileName: '',
        //版本号
        editionNum: '',
        //编制日期
        writeDate: '',
        //执行日期
        executeDate: '',
        //文件编号
        fileNum: '',
        //编制
        writeUse: '',
        //审核
        examineUse: '',
        //批准
        ratifyUse: '',
        //会签
        countersignUse: '',
        //作业指导书
        workBook: '',
        //产品图号
        productId: '',
        //视频附件
        bookVideo: '',
        //修改记录
        editRecord: '',
        //控制计划标记位
        controlSign: '',
        //三不检验指导书标记位
        threeBookSign: '',
        //装配零部件明细
        partsList: '',
        //指导书类型
        bookType: '',
        //删除标记位
        deleteSign: '',
        //创建时间
        establishTime: '',
        //修改时间
        UpdateTime: '',
      },
      //表单校验变量
      rulesForm:{
        workshop:[{ validator: dataNull, trigger: 'blur'},],
        lineName:[{ validator: dataNull, trigger: 'blur'},],
        op:[{ validator: dataNull, trigger: 'blur'},],
        fileName:[{ validator: dataNull, trigger: 'blur'},],
        editionNum:[{ validator: dataNull, trigger: 'blur'},],
        writeDate:[{ validator: dataNull, trigger: 'blur'},],
        executeDate:[{ validator: dataNull, trigger: 'blur'},],
        examineUse:[{ validator: dataNull, trigger: 'blur'},],
        ratifyUse:[{ validator: dataNull, trigger: 'blur'},],
        countersignUse:[{ validator: dataNull, trigger: 'blur'},]
      },
      //作业指导书的数据表
      workBook:[
        {
          id:0,
          work:'请编辑',//工作项目
          problem:'请输入',//关注点
          inspect:'请输入',//品质检查
          spendTime:0,//需要时间
          controlPlan:0,//控制计划的关联项
          toll:'',//工具
          device:'',//设备
          accessories:'',//辅料,
          pictureList:'',//图片列表
          videoList:''//视频列表
        }
      ],
      //记录部件明细
      partsListData:[
        {
          // 图示代码
          mapId:'',
        // 工步号
        stepNum:'',
        // 零部件编号
        partId:'',
        // 零部件名称
        partName:'',
        // 数量
        partNum:'',
        // 特殊特性
        special:'',
        // 最后编辑时间
        endDate:'',
          //最后编辑人
          endName:'',
        // 图片列表
        imageList:'',
        // 预留
        reserve1:'',
        // 预留
        reserve2:'',
        // 预留
        reserve3:'',
        }
      ],
      //记录部件的临时编辑变量
      partsListFrom:{
        // 图示代码
        mapId:'',
        // 工步号
        stepNum:'',
        // 零部件编号
        partId:'',
        // 零部件名称
        partName:'',
        // 数量
        partNum:'',
        // 特殊特性
        special:'',
        // 最后编辑时间
        endDate:'',
        //最后编辑人
        endName:'',
        // 图片列表
        imageList:'',
        // 预留
        reserve1:'',
        // 预留
        reserve2:'',
        // 预留
        reserve3:'',
      },
      //记录部件的点击状态：1.新增；2编辑；3.向下插入；4：删除
      partsListDoe:0,
      //记录部件的点击行内容，Scope格式
      partsListScope:null,
      //选择零部件的变量
      partsListOptions:partListOptions,

      //作业指导书控制计划部分的数据集合
      controlPlanData:[
        {
          //主键
          id:-1,
          //产品/过程规范/公差
          specification:'',
          //评价
          measure:'',
          //容量
          capacity:'',
          //频率
          frequency:'',
          //控制方法
          method:'',
        },
      ],
      //控制计划的列表展示
      tableDataControl:[
        {
          //记录主键ID
          id: null,
          //零件/过程编号
          processNumber: '',
          processNumberEnglish:'',
          processNumberRussian:'',
          //机器、夹具、装置、工装
          device: '',
          deviceEnglish:'',
          deviceRussian:'',
          //过程名称/操作描述
          operation: '',
          operationEnglish:'',
          operationRussian:'',
          //编号
          numberOrder: '',
          //产品
          product: '',
          productEnglish:'',
          productRussian:'',
          //过程
          processUse: '',
          processUseEnglish:'',
          processUseRussian:'',
          //特殊特性分类
          characteristic:'',
          //产品、过程规范、公差
          specification: '',
          specificationEnglish:'',
          specificationRussian:'',
          //评价、测量技术
          measure: '',
          measureEnglish:'',
          measureRussian:'',
          //容量
          capacity: '',
          capacityEnglish:'',
          capacityRussian:'',
          //频率
          frequency: '',
          frequencyEnglish:'',
          frequencyRussian:'',
          //控制方法
          method: '',
          methodEnglish:'',
          methodRussian:'',
          //责任部门
          department: '',
          departmentEnglish:'',
          departmentRussian:'',
          //反应计划
          reaction:0,
          //产品图号
          drawing: '',
          //工序号
          op: 0,
          //车间名称
          workshop:'',
          workshopEnglish:'',
          workshopRussian:'',
          //记录顺序用
          orderNumber:0,
          //记录删除标记
          deleteSign:1,
        }
      ],
      //固定选择器用到的变量
      //车间名称
      optionWorkshop: optionWorkshop,
      //线体名称
      optionLine:workshopAssembly,
      //工序名称
      optionOp:OpAssembly,
      //版本号
      optionEditionNum:[{
        value:1,
        label:'最新'
      },],
      //线体名称选择器的控制是否可以用
      disabledLineName:true,
      //工序的选择器，控制是否可用
      disabledOp:false,
      //弹窗用到的变量
      titleUse:'提示',
      //控制编辑作业指导书的步骤的弹窗
      dialogVisibleText:false,
      //控制表头的变量编辑的弹窗
      dialogTableHeader:false,
      //上传图片的弹窗打开后，点击放大管控弹窗提示
      dialogPictureAnnex:false,
      //上传照片的弹窗
      dialogPicture:false,
      //上传视频的弹窗
      dialogVideo:false,
      //打开控制计划的编辑器
      dialogVisibleControl:false,
      //控制打开零部件编辑弹窗
      partsListDialog:false,
      //控制零部件明细中的图片弹窗
      dialogPicturePart:false,
      //控制失效案例库的弹窗
      caseUseDialog:false,

      //图片相关的数据，录像相关的项目
      itemView:[],//展示图片了路径,用在了走马灯部位
      itemViewVideo:[],//展示了录像的路径，用在录像的走马灯上
      editPictureType:0,//修改图片的类型，主要记录了
      PictureList:[],//图片文件的
      videoList:[],//录像的文件列表
      disabled:false,//图片显示的控制变量
      dialogImageUrl:'',//弹窗显示的图片路径
      videoUrl:'',//视频的地址
      fileType:'',//限定上传文件的类型

      //弹窗用到的输入变量
      inputText1:'',//记录作业步骤
      inputText2:'',//记录注意点
      inputText3:'',//品质检查
      inputText4:'',//设备名称
      inputText5:'',//辅料名称
      inputText6:'',//工具名称
      inputNum:0,//用户输入的时间

      //用户现在的类型是什么
      typeTableUse:0,//选择的哪一类作业指导书
      tableDataScope:null,//选择的总表内容传递
      editBookUse:0,//用户选择对作业要领书编辑的内容
      editBookScope:null,//用户现在的作业指导书内容传递
      editTableUse:0,//记录编辑表头的类型，1：插入，2.编辑，3.删除
      editVideoAndImageUse:1,//记录用户选择的是看图片，还是看视频。1:看图片；2:看视频；
      workBookHeardUse:1,//记录用户选择的看作业指导书上的那个类型，1代表是作业指导书；2.

      //选择控制计划条目是那个,记录的是选择的本行所有内容。
      controlPlanSelection:[],
      //选择的控制计划的ID是什么，是一个数据合集。
      controlPlanSelectionId:'',

      //等查询完毕控制计划关联项后，开始显示元素
      isControlPlanLoad:false,

      //忙加载
      loading:false,

      //画工时的直方图
      //画直方图
      chartUserBor:null,
      optionBor: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'3%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data:[]
          }
        ]
      },

      //失效案例数据列表
      caseUseData: [{
        id: '1',//主键
        caseUse: '王小虎',//失效案例描述
        pictureList:'',//图片列表
        videoList:'',//视频列表
        editName:'',
        editDate:'',
        reserve1:'',
        reserve2:'',
        reserve3:''
      }],
      //用户编辑失效案例库的类型
      caseUseDoe:0,
      //用户点击的当前条目记录，是scope格式
      caseUseScope:null,
      //用户输入的失效案例信息
      inputTextCaseUse:'',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    workBookHeardUse(newVal) {
      this.$nextTick(() => {
        if (newVal === 4 && !this.chartUserBor) {
          this.initChart();
        } else if (newVal !== 4 && this.chartUserBor) {
          this.chartUserBor.dispose();
          this.chartUserBor = null;
        }
      });
    },
  },
  methods: {
    //通用，树形导航筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //通用，退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //通用，把当前日期组合为YYYY-MM-DD格式的文本格式
    nowDateStr() {
      const now = new Date(); // 获取当前日期

      const year = now.getFullYear(); // 获取年份
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份从0开始，需要加1，并确保是两位数
      const day = String(now.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数

      return `${year}-${month}-${day}`; // 返回格式化后的日期
    },
    //单击树形导航结构的反应
    treeClick(data,node) {
      this.titleMianId='未选择产品'
      this.titleMianOp='未选择工序'
      if (node.level>=3){
        this.treeData=data
        this.treeNode=node
        let firstFiledVal=''
        if (this.treeNode.parent.parent.label==='装配车间' ||
            this.treeNode.parent.parent.label==='Assembly workshop' ||
            this.treeNode.parent.parent.label==='Сборочная линия'){
          firstFiledVal='装配车间/Assembly workshop/Сборочная линия'
        }
        const secondFiledVal=node.parent.label
        const thirdFiledVal=node.data.label
        //向后端查询数据
        this.inquiryType('workshop','productId','op',firstFiledVal,secondFiledVal,thirdFiledVal)
        this.tableDataScope=null
        this.tableDataTemp={
          //主键
          id: '',
          //车间名称
          workshop: '',
          //线体名称
          lineName: '',
          //工序名称
          op: '',
          //文件名称
          fileName: '',
          //版本号
          editionNum: '',
          //编制日期
          writeDate: '',
          //执行日期
          executeDate: '',
          //文件编号
          fileNum: '',
          //编制
          writeUse: '',
          //审核
          examineUse: '',
          //批准
          ratifyUse: '',
          //会签
          countersignUse: '',
          //作业指导书
          workBook: '',
          //产品图号
          productId: '',
          //视频附件
          bookVideo: '',
          //修改记录
          editRecord: '',
          //控制计划标记位
          controlSign: '',
          //三不检验指导书标记位
          threeBookSign: '',
          //装配零部件明细
          partsList: '',
          //指导书类型
          bookType: '',
          //删除标记位
          deleteSign: '',
          //创建时间
          establishTime: '',
          //修改时间
          UpdateTime: '',
        }
        //打开弹窗
        this.drawer=true
      }
    },
    //通用，语言选择
    chooseLanguage(language){
      this.languageS=language
      if (this.languageS==='chinese'){
        this.treeControl=tree_workshop_product_op_chinese
        this.treeList=tree_workshop_product_op_chinese
      }
      else if (this.languageS==='english'){
        this.treeControl=tree_workshop_product_op_english
        this.treeList=tree_workshop_product_op_english
      }
      else if (this.languageS==='russian'){
        this.treeControl=tree_workshop_product_op_russian
        this.treeList=tree_workshop_product_op_russian
      }
    },
    // 通用，弹窗关闭的时候
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //单击控制计划的树形导航结构
    controlTreeClick(data,node){
      //这里的所有接口都走到《控制计划页的接口》.并且重新整理数据表。使用新的数据表。
      //根据点击的内容，查询控制计划中的信息
       if (data.label.includes('OP') || data.label.includes('GG') || data.label.includes('Hl')){
         //表明现在的点击是已经到了工序部位了。
         // 向后端发送请求，按照工序号、产品名称、车间名称进行筛选需要的内容
          this.$request.post('/inquiryControlPlanByOp',{
            firstFieldName:'workshop',
            firstFieldVal:node.parent.parent.data.label,
            secondFieldName:'drawing',
            secondFieldVal:node.parent.data.label,
            thirdFieldName:'op',
            thirdFieldVal:data.label,
          })
          .then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }else {
              //对大表赋值
              this.tableDataControl=result.data
            }
          })
       }
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'operateGuideBook',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.operateGuideBook
          this.useId=useId
        }
      })
    },
    //辅助函数，依据用户现点击的是那个产品，那一序，那个车间，然后赛选出作业指导书，是用三个变量筛选产品的
    // val是一个joson格式的数据{firstFiledName：firstFiledName,
    inquiryType(firstFiledName,secondFiledName,thirdFiledName,firstFiledVal,secondFiledVal,thirdFiledVal){
      //向后端发送请求，把查询出来的作业指导书类别赋值给大表。
      this.$request.post('/inquiryOperateGuideBook',{
        firstFiledName:firstFiledName,
        secondFiledName:secondFiledName,
        thirdFiledName:thirdFiledName,
        firstFiledVal:firstFiledVal,
        secondFiledVal:secondFiledVal,
        thirdFiledVal:thirdFiledVal
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.tableData=result.data
        }
      })
    },
    //选择器的变化引起的函数
    selectChange(val, doe){
      if (val==='机加车间/Machining workshop/Машиностроительный цех'){
        this.optionLine=machiningAssembly
        this.disabledLineName=false
      }
      else if (val==='装配车间/Assembly workshop/Сборочная линия'){
        this.optionLine=workshopAssembly
        this.disabledLineName=false
        console.log(doe)
      }
    },
    //编辑表头的函数，有：1：增加；2：修改；3：删除
    editTable(doe){
      if (this.treeNode===null){
        alert("请先选择工序")
        return
      }

        //做的是工序业指导书,
        //把用户选择的是编辑/添加/删除  中的哪一项传递出去
        this.editTableUse=doe
        if (doe===1){
          //是插入操作，组合数据
          this.formTableData={
            //主键
            id:'',
            //车间名称
            workshop:'',
            //线体名称
            lineName:'',
            //工序名称
            op:'',
            //文件名称
            fileName:'',
            //版本号
            editionNum:'',
            //编制日期
            writeDate:'',
            //执行日期
            executeDate:'',
            //文件编号
            fileNum:'',
            //编制
            writeUse:'',
            //审核
            examineUse:'',
            //批准
            ratifyUse:'',
            //会签
            countersignUse:'',
            //作业指导书
            workBook:'',
            //产品图号
            productId:'',
            //视频附件
            BookVideo:'',
            //修改记录
            editRecord:'',
            //控制计划标记位
            controlSign:'',
            //三不检验指导书标记位
            threeBookSign:'',
            //装配零部件明细
            partsList:'',
            //指导书类型
            bookType:'装配作业指导书',
            //删除标记位
            deleteSign:'',
            //创建时间
            establishTime:'',
            //修改时间
            UpdateTime:'',
          }
          if (this.treeNode.parent.parent.label==='装配车间' ||
              this.treeNode.parent.parent.label==='Assembly workshop' ||
              this.treeNode.parent.parent.label==='Сборочная линия'){
            this.formTableData.workshop='装配车间/Assembly workshop/Сборочная линия'
            this.formTableData.op=this.treeNode.data.label
            this.formTableData.productId=this.treeNode.parent.label
            this.optionLine=workshopAssembly
            this.disabledLineName=false
          }
          this.titleUse='您正在插入一行《装配作业指导书》'
          this.dialogTableHeader=true
        }
        else if (doe===2){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是编辑工作，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在修改选择的《装配作业指导书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }
        else if (doe===3){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是删除，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在删除一个《装配作业指导书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }


    },
    //表头弹窗中的确认的按钮，向后端保存数据
    onSubmit(doe,formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            //现在是对装配作业指导书进行添加/修改/删除,doe接收的是用户现在了操作类型：1.插入；2.编辑；3.删除
            if (doe===1){
              //现在是新建一个指导书
              /*组合数据*/
              //组合相关人员的标记
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`

              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName
              //组合删除标记位
              this.formTableData.deleteSign=1
              //组合作业指导书的内容
              this.formTableData.workBook='作业指导书步骤|*|Steps of homework instruction manual|*|Этапы руководства по оперативной деятельности|%|作业关注点|*|Homework focus points|*|Приоритеты домашних заданий|%|品质检查|*|Quality Inspection|*|Контроль качества|%|0|%|-1|%|工具|*|tool|*|Инструменты|%|辅料|*|accessories|*|Вспомогательные материалы|%|设备|*|device|*|Оборудование|%|undefined|*||%|undefined|*||-|'
              //向后端发送请求，插入数据
              this.$request.post('interOperateGuideBook',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  alert("插入成功")
                  //进行数据赋值
                  this.tableData.push(this.formTableData)
                  this.tableDataTemp=_.cloneDeep(this.formTableData)

                  //指导书赋值
                  //把数据进行分割,分割出步骤一条一条的。
                  const temp=this.tableDataTemp.workBook.split('|-|')
                  // 对每一条的数据进行处理
                  this.workBook=[]
                  for (let i = 0; i < temp.length-1; i++) {
                    //对数据进行分割
                    const time=temp[i].split('|%|')
                    // 组合数据
                    const timeTemp={
                      id:0,
                      work:time[0],//工作项目
                      problem:time[1],//关注点
                      inspect:time[2],//品质检查
                      spendTime:time[3],//需要的时间
                      controlPlan:time[4],//控制计划的关联项
                      toll:time[5],//工具
                      device:time[7],//设备
                      accessories:time[6],//辅料,
                      pictureList:time[8],//图片列表数据
                      videoList:time[9],//视频列表数据
                    }

                    this.workBook.push(timeTemp)
                  }

                  this.dialogTableHeader=false
                }
              })
            }
            else if (doe===2){
              //是编辑操作
              /*组合数据*/
              //组合相关人员的标记,重新设定编审批的内容
              this.formTableData.ratifyUse=this.formTableData.ratifyUse.replace(/\/指定/g,'')
              this.formTableData.examineUse=this.formTableData.examineUse.replace(/\/指定/g,'')
              this.formTableData.countersignUse=this.formTableData.countersignUse.replace(/\/指定/g,'')
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`

              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName

              this.$request.post('/editOperateGuideBookTable',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //数据赋值
                  //进行数据赋值
                  this.tableData[this.tableDataScope.$index]=this.formTableData
                  this.tableDataTemp=_.cloneDeep(this.formTableData)
                  this.dialogTableHeader=false;
                  alert("修改成功")
                }
              })
            }
            else if (doe===3){
              //是删除操作，用修改一个字段的形式实现，但是这个是根据id修改一个int类型的。
              this.$request.post('editOperateGuideBookFieldInt',{
                id:this.tableDataScope.row.id,
                fieldName:'deleteSign',
                fieldVal:0,
              }).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //组合数据
                  //删除大表中的内容
                  this.tableData.splice(this.tableDataScope.$index,1);
                  this.tableDataTemp={
                    //id主键
                    id:'',
                    //车间名称
                    workshop:'',
                    //线体名称
                    lineName:'',
                    //工序名称
                    op:'',
                    //文件名称
                    fileName:'',
                    // 版本号
                    editionNum:'',
                    //编制日期
                    writeDate:'',
                    //执行日期
                    executeDate:'',
                    //文件编号
                    fileNum:'',
                    //编制
                    writeUse:'',
                    //审核
                    examineUse:'',
                    //批准
                    ratifyUse:'',
                    //会签
                    countersignUse:'',
                    //作业指导书
                    workBook:'',
                    //产品图号
                    productId:'',
                    // 视频附件
                    BookVideo:'',
                    // 修改记录
                    editRecord:'',
                    //指导书类型
                    bookType:'',
                    //删除标记位
                    deleteSign:'',
                    //创建时间
                    establishTime:'',
                    //修改时间
                    UpdateTime:'',
                  }
                  this.workBook=[]
                  this.tableDataScope=null
                  this.dialogTableHeader=false
                }
              })
            }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //对作业指导书操作，添加、编辑、删除，控制计划的关联设置等，所有的作业指导书编辑部分的函数
    editBook(doe,scope){
      this.loading=false
      //把用户现在的类型传递出去，1：编辑作业指导书；2.增加一个作业指导书的步骤；3.删除作业指导书；4.增加这个条目下的图片；5.增加这条目下的视频；
      this.editBookUse=doe
      //把用户选择的作业指导书的scope格式传递出去。
      this.editBookScope=scope

      if (this.treeNode===null){
        alert("请先选择工序")
        return
      }

        if (this.editBookUse===1){
          //是编辑操作
          //进行初始赋值
          this.titleUse='您正在编辑本条步骤'
          this.inputText1=_.cloneDeep(this.editBookScope.row.work)
          this.inputText2=_.cloneDeep(this.editBookScope.row.problem)
          this.inputText3=_.cloneDeep(this.editBookScope.row.inspect)
          this.inputText4=_.cloneDeep(this.editBookScope.row.device)
          this.inputText5=_.cloneDeep(this.editBookScope.row.accessories)
          this.inputText6=_.cloneDeep(this.editBookScope.row.toll)
          this.inputNum=_.cloneDeep(this.editBookScope.row.spendTime)
          this.dialogVisibleText=true
        }
        else if (this.editBookUse===2){
          //是一向下插入操作
          //初始化数据
          this.titleUse='您正在向下插入一个新的步骤'
          this.inputText1=''
          this.inputText2=''
          this.inputText3=''
          this.inputText4=''
          this.inputText5=''
          this.inputText6=''
          this.inputNum=0
          this.dialogVisibleText=true
        }
        else if (this.editBookUse===3){
          //是编辑操作
          //进行初始赋值
          this.titleUse='您正在删除本条步骤'
          this.inputText1=_.cloneDeep(this.editBookScope.row.work)
          this.inputText2=_.cloneDeep(this.editBookScope.row.problem)
          this.inputText3=_.cloneDeep(this.editBookScope.row.inspect)
          this.inputText4=_.cloneDeep(this.editBookScope.row.device)
          this.inputText5=_.cloneDeep(this.editBookScope.row.accessories)
          this.inputText6=_.cloneDeep(this.editBookScope.row.toll)
          this.inputNum=_.cloneDeep(this.editBookScope.row.spendTime)
          this.dialogVisibleText=true
        }
        else if (this.editBookUse===4){
          //是编辑照片的操作，包括添加、删除。
          //组合图片编辑列表的数据
          //组合照片的数据
          if (this.editBookScope.row.pictureList.includes('undefined')){
            //没有图片信息
            this.PictureList = []
          }
          else {
            this.PictureList = []
            const temp1 = this.editBookScope.row.pictureList.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.PictureList.push(temp2)
            }
          }
          this.titleUse='您正在编辑本行的图片信息'
          this.fileType='image/jpeg, image/png'
          this.dialogPicture=true
        }
        else if (this.editBookUse===5){
          //在装配作业指导书中编辑视频操作，包括添加、删除。
          //组合视频编辑列表的数据
          //组合视频的数据
          if (this.editBookScope.row.videoList.includes('undefined')){
            //没有视频信息
            this.videoList = []
          }
          else {
            this.videoList = []
            const temp1 = this.editBookScope.row.videoList.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.videoList.push(temp2)
            }
          }
          this.fileType='video/mp4, video/x-matroska, video/quicktime, video/webm'
          this.titleUse='您正在编辑本行的视频信息'
          this.dialogVideo=true
        }
        else if (this.editBookUse===6){
          //点击的是编辑控制计划内容，关联控制计划的编辑页。
          this.titleUse='编辑控制计划管理项目'
          this.controlPlanSelection=[]
          this.tableDataControl=[]
          this.dialogVisibleControl=true
        }
        else if (this.editBookUse===100){
          //需要查看作业指导的图片，没有其他的编辑内容,是组合走马灯照片或者视频的
          //组合走马灯的照片
          if (this.editBookScope.row.pictureList.includes('undefined')){
            this.itemView=[]
          }
          else {
            let pictureTemp=this.editBookScope.row.pictureList.split('|*|')
            this.itemView=[]
            for (let i = 0; i < pictureTemp.length-1; i++) {
              let temp=filepath+pictureTemp[i]
              this.itemView.push(temp)
            }
          }
          //组合走马灯的视频
          if (this.editBookScope.row.videoList.includes('undefined')){
            this.itemViewVideo=[]
          }
          else {
            let pictureTemp=this.editBookScope.row.videoList.split('|*|')
            this.itemViewVideo=[]
            for (let i = 0; i < pictureTemp.length-1; i++) {
              let temp=filepath+pictureTemp[i]
              this.itemViewVideo.push(temp)
            }
          }
        }


    },
    //生成唯一标识码的函数（利用时间戳和随机数
    generateUniqueId() {
      return Date.now().toString() + Math.random().toString(36).slice(2, 11);
    },
    //保存作业指导书部分的数据的函数
    saveDataTextTwo(){
        if (this.editBookUse===1){
          //是编辑操作
          if (this.inputNum===0){
            alert("本工步无时间，请核对")
            return
          }
          //是装配作业指导书下的修改某一个条目的操作
          if (this.inputText1===''){
            this.inputText1='作业指导书步骤|*|Steps of homework instruction manual|*|Этапы руководства по оперативной деятельности'
          }
          if (this.inputText2===''){
            this.inputText2='无|*|not have|*|Нет'
          }
          if (this.inputText3===''){
            this.inputText3='无|*|not have|*|Нет'
          }
          if (this.inputText4===''){
            this.inputText4='无|*|not have|*|Нет'
          }
          if (this.inputText5===''){
            this.inputText5='无|*|not have|*|Нет'
          }
          if (this.inputText6===''){
            this.inputText6='无|*|not have|*|Нет'
          }

          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp[this.editBookScope.$index].work=this.inputText1
          temp[this.editBookScope.$index].problem=this.inputText2
          temp[this.editBookScope.$index].inspect=this.inputText3
          temp[this.editBookScope.$index].device=this.inputText4
          temp[this.editBookScope.$index].accessories=this.inputText5
          temp[this.editBookScope.$index].toll=this.inputText6
          temp[this.editBookScope.$index].spendTime=this.inputNum
          //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
          let strTemp=''//组合的临时变量,用在向后端保存数据的变量
          for (let i = 0; i < temp.length; i++) {
            //组合自己每一条的变量
            let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
                +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
                +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
            strTemp=strTemp+itemStr+'|-|'
          }
          //向后端发动数据，进行保存
          this.$request.post('editOperateGuideBookField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.workBook,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                }
                else {
                  this.dialogVisibleText=false
                  alert("修改成功")
                  //对新数据进行重新赋值
                  this.tableData[this.tableDataScope.$index].workBook=result.data
                  //把数据赋值给临时的数据
                  this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                  //重新组合数据
                  //组合作业指导书的内容
                  //把数据进行分割,分割出步骤一条一条的。
                  const temp=this.tableDataTemp.workBook.split('|-|')
                  // 对每一条的数据进行处理
                  this.workBook=[]
                  for (let i = 0; i < temp.length-1; i++) {
                    //对数据进行分割
                    const time=temp[i].split('|%|')
                    // 组合数据
                    const timeTemp={
                      id:0,
                      work:time[0],//工作项目
                      problem:time[1],//关注点
                      inspect:time[2],//品质检查
                      spendTime:time[3],//需要的时间
                      controlPlan:time[4],//控制计划的关联项
                      toll:time[5],//工具
                      device:time[7],//设备
                      accessories:time[6],//辅料,
                      pictureList:time[8],//图片列表数据
                      videoList:time[9],//视频列表数据
                    }

                    this.workBook.push(timeTemp)
                  }
                }
              })
        }
        else if (this.editBookUse===2){
          //是向下插入操作
          if (this.inputNum===0){
            alert("本工步无时间，请核对")
            return
          }
          //是装配作业指导书下的修改某一个条目的操作
          if (this.inputText1===''){
            this.inputText1='作业指导书步骤|*|Steps of homework instruction manual|*|Этапы руководства по оперативной деятельности'
          }
          if (this.inputText2===''){
            this.inputText2='无|*|not have|*|Нет'
          }
          if (this.inputText3===''){
            this.inputText3='无|*|not have|*|Нет'
          }
          if (this.inputText4===''){
            this.inputText4='无|*|not have|*|Нет'
          }
          if (this.inputText5===''){
            this.inputText5='无|*|not have|*|Нет'
          }
          if (this.inputText6===''){
            this.inputText6='无|*|not have|*|Нет'
          }
          //组合数据
          //向总数据中进行组合
          const workBookTemp={
            id:-1,
            work:this.inputText1,//工作项目
            problem:this.inputText2,//关注点
            inspect:this.inputText3,//品质检查
            spendTime: this.inputNum,//用时，单位S
            controlPlan:-1,//控制计划的关联项
            toll:this.inputText6,//工具
            device:this.inputText4,//设备
            accessories:this.inputText5,//辅料,
            pictureList:'undefined|*|'//图片列表
          }
          //拷贝数据
          let temp=_.cloneDeep(this.workBook)
          //插入数据
          temp.splice(this.editBookScope.$index+1,0,workBookTemp)
          //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
          let strTemp=''//组合的临时变量,用在向后端保存数据的变量
          for (let i = 0; i < temp.length; i++) {
            //组合自己每一条的变量
            let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
                +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
                +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
            strTemp=strTemp+itemStr+'|-|'
          }
          //向后端发动数据，进行保存
          this.$request.post('editOperateGuideBookField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.workBook,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  alert("插入成功")
                  //对新数据进行重新赋值
                  this.tableData[this.tableDataScope.$index].workBook=result.data
                  //把数据赋值给临时的数据
                  this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                  //重新组合数据
                  //组合作业指导书的内容
                  //把数据进行分割,分割出步骤一条一条的。
                  const temp=this.tableDataTemp.workBook.split('|-|')
                  // 对每一条的数据进行处理
                  this.workBook=[]
                  for (let i = 0; i < temp.length-1; i++) {
                    //对数据进行分割
                    const time=temp[i].split('|%|')
                    // 组合数据
                    const timeTemp={
                      id:0,
                      work:time[0],//工作项目
                      problem:time[1],//关注点
                      inspect:time[2],//品质检查
                      spendTime:time[3],//需要的时间
                      controlPlan:time[4],//控制计划的关联项
                      toll:time[5],//工具
                      device:time[7],//设备
                      accessories:time[6],//辅料,
                      pictureList:time[8],//图片列表数据
                      videoList:time[9],//视频列表数据
                    }

                    this.workBook.push(timeTemp)
                  }
                }
              })
        }
        else if (this.editBookUse===3){
          //是删除操作
          //组合数据
          //向总数据中进行组合
          //拷贝数据
          let temp=_.cloneDeep(this.workBook)
          //插入数据
          temp.splice(this.editBookScope.$index,1)
          //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
          let strTemp=''//组合的临时变量,用在向后端保存数据的变量
          for (let i = 0; i < temp.length; i++) {
            //组合自己每一条的变量
            let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
                +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
                +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
            strTemp=strTemp+itemStr+'|-|'
          }
          //向后端发动数据，进行保存
          this.$request.post('editOperateGuideBookField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.workBook,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  alert("删除成功")
                  //对新数据进行重新赋值
                  this.tableData[this.tableDataScope.$index].workBook=result.data
                  //把数据赋值给临时的数据
                  this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                  //重新组合数据
                  //组合作业指导书的内容
                  //把数据进行分割,分割出步骤一条一条的。
                  const temp=this.tableDataTemp.workBook.split('|-|')
                  // 对每一条的数据进行处理
                  this.workBook=[]
                  for (let i = 0; i < temp.length-1; i++) {
                    //对数据进行分割
                    const time=temp[i].split('|%|')
                    // 组合数据
                    const timeTemp={
                      id:0,
                      work:time[0],//工作项目
                      problem:time[1],//关注点
                      inspect:time[2],//品质检查
                      spendTime:time[3],//需要的时间
                      controlPlan:time[4],//控制计划的关联项
                      toll:time[5],//工具
                      device:time[7],//设备
                      accessories:time[6],//辅料,
                      pictureList:time[8],//图片列表数据
                      videoList:time[9],//视频列表数据
                    }
                    this.workBook.push(timeTemp)
                  }
                }
              })
        }

    },
    //保存控制计划的关联关系
    saveDataControl(){
      //用户要保存控制计划关联项。
      // 每一个步骤可能和多个控制计划关联，每一项之间用到了|*|分割符
      // 组合数据
      let controlPlanStr=''
      for (let i = 0; i < this.controlPlanSelection.length; i++) {
        controlPlanStr=controlPlanStr+this.controlPlanSelection[i].id+'|*|'
      }
      // 重新组合作业指导书的内容
      //向总数据中进行组合
      let temp=_.cloneDeep(this.workBook)
      if (controlPlanStr!==''){
        //向作业指导书中数据赋值
        temp[this.editBookScope.$index].controlPlan=controlPlanStr
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        //向后端写入数据
        //向后端发动数据，进行保存
        this.$request.post('editOperateGuideBookField',{
          id:this.tableDataScope.row.id,
          fieldName:'workBook',
          fieldVal:strTemp,
          fieldValOld:this.tableDataScope.row.workBook,
          editUseName:this.useName
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }
              else {
                this.dialogVisibleText=false
                //对新数据进行重新赋值
                this.tableData[this.tableDataScope.$index].workBook=result.data
                //把数据赋值给临时的数据
                this.tableDataTemp=_.cloneDeep(this.tableData[this.tableDataScope.$index])
                //重新组合数据
                //组合作业指导书的内容
                //把数据进行分割,分割出步骤一条一条的。
                const temp=this.tableDataTemp.workBook.split('|-|')
                // 对每一条的数据进行处理
                this.workBook=[]
                for (let i = 0; i < temp.length-1; i++) {
                  //对数据进行分割
                  const time=temp[i].split('|%|')
                  // 组合数据
                  const timeTemp={
                    id:0,
                    work:time[0],//工作项目
                    problem:time[1],//关注点
                    inspect:time[2],//品质检查
                    spendTime:time[3],//需要的时间
                    controlPlan:time[4],//控制计划的关联项
                    toll:time[5],//工具
                    device:time[7],//设备
                    accessories:time[6],//辅料,
                    pictureList:time[8],//图片列表数据
                    videoList:time[9],//视频列表数据
                  }
                  this.workBook.push(timeTemp)
                }
              }
            })
      }
    },
    //主表的默认排序
    formatter(row, column) {
      console.log(column)
      return row.address;
    },
    //单击主表某一个数据表的时候，做出的反应（现在函数用在了主表上）
    tableDataClick(doe,scope){
      if (doe===1){
        this.titleMianId=this.treeNode.parent.label
        this.titleMianOp=this.treeNode.data.label
        //现在是主表上的点击
        //把点击击的单元格范围数据发送出去
        this.tableDataScope=scope
        //把数据赋值给临时的数据
        this.tableDataTemp=_.cloneDeep(scope.row)
        //组合作业指导书的内容
        //把数据进行分割,分割出步骤一条一条的。
        const temp=this.tableDataTemp.workBook.split('|-|')
        // 对每一条的数据进行处理
        //对作业指导书进行组合
        this.workBook=[]
        for (let i = 0; i < temp.length-1; i++) {
          //对数据进行分割
          const time=temp[i].split('|%|')
          // 组合数据
          const timeTemp={
            id:0,
            work:time[0],//工作项目
            problem:time[1],//关注点
            inspect:time[2],//品质检查
            spendTime:time[3],//需要的时间
            controlPlan:time[4],//控制计划的关联项
            toll:time[5],//工具
            device:time[7],//设备
            accessories:time[6],//辅料,
            pictureList:time[8],//图片地址列表
            videoList:time[9],//视频地址列表
          }
          this.workBook.push(timeTemp)
        }

        //对零部件列表进行组合
        //新组合零部件明细
        this.partsListData=[]
        let partsTemp=this.tableData[this.tableDataScope.$index].partsList.split('|-|')
        for (let i = 0; i < partsTemp.length-1; i++) {
          let partsItem=partsTemp[i].split('|%|')
          let temp={
            // 图示代码
            mapId:partsItem[0],
            // 工步号
            stepNum:partsItem[1],
            // 零部件编号
            partId:partsItem[2],
            // 零部件名称
            partName:partsItem[3],
            // 数量
            partNum:partsItem[4],
            // 特殊特性
            special:partsItem[5],
            // 最后编辑时间
            endDate:partsItem[6],
            // 最后编辑人
            endName: partsItem[7],
            // 图片列表
            imageList:partsItem[8],
            // 预留
            reserve1:partsItem[9],
            // 预留
            reserve2:partsItem[10],
            // 预留
            reserve3:partsItem[11],
          }
          this.partsListData.push(temp)
        }

        //对失效案例库列表进行组合
        this.caseUseData=[]
        console.log(this.tableData[this.tableDataScope.$index].caseUse)
        if (this.tableData[this.tableDataScope.$index].caseUse===''){
          this.caseUseData=[]
        }
        else {
          let caseUseTemp=this.tableData[this.tableDataScope.$index].caseUse.split('|-|')
          if (caseUseTemp.length===0){
            caseUseTemp.push(this.tableData[this.tableDataScope.$index].caseUse)
          }
          for (let i = 0; i < caseUseTemp.length; i++) {
            let caseUseItem=caseUseTemp[i].split('|%|')
            let temp={
              id: i,
              caseUse: caseUseItem[0],
              editName: caseUseItem[1],
              editDate: caseUseItem[2],
              pictureList: caseUseItem[3],
              videoList: caseUseItem[4],
              reserve1: caseUseItem[5],
              reserve2: caseUseItem[6],
              reserve3: caseUseItem[7]
            }
            this.caseUseData.push(temp)
          }
        }
        //对工时统计进行组合
        this.initChart()
        //关闭抽屉
        this.drawer=false
      }
    },
    //上传文件的函数(上传图片，视频，是零部件明细中的）
    saveFileAnnexPart(file, fileList){
      this.loading=false
      console.log(fileList)
          //是对图片的操作
          const formData = new FormData()
          //1.新生成一个文件名称,并且把文件名称的后缀添加上
          let fileName=this.generateUniqueId()+'.'+file.name.split('.')[file.name.split('.').length-1]
          //2.记录一个新的图片名称
          let pictureName=''
          //把文件数据放进去
          file.name=fileName
          //把图片加入到自己的图片列表中，好像没有用
          this.PictureList.push(file)
          formData.append('file', file.raw)
          //把原来的图片字符串放进去，作为修改用
          //把数据整合到作业指导书的内容中
          //先判断原来的数据是否有图片
          if (this.partsListScope.row.imageList.includes('undefined')){
            //原来没有图片，需要现在全新生成
            pictureName=fileName+'|*|'
          }
          else {
            //原来已经有图片了
            pictureName=this.partsListScope.row.imageList+fileName+'|*|'
          }
          //重新组合作业指导书的文本内容。
          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.partsListData)
          //把新的图片字符串赋值
          temp[this.partsListScope.$index].imageList=pictureName
          //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
          let strTemp=''//组合的临时变量,用在向后端保存数据的变量
          for (let i = 0; i < temp.length; i++) {
            //组合自己每一条的变量
            let itemStr=temp[i].mapId+'|%|'+temp[i].stepNum+'|%|'+temp[i].partId+'|%|'+temp[i].partName
                +'|%|'+temp[i].partNum+'|%|'+temp[i].special+'|%|'+temp[i].endDate+'|%|'+temp[i].endName
                +'|%|'+temp[i].imageList+'|%|'+temp[i].reserve1+'|%|'+temp[i].reserve2+'|%|'+temp[i].reserve3+'|%|'
            strTemp=strTemp+itemStr+'|-|'
          }
          formData.append('id',this.tableDataScope.row.id)
          formData.append('fieldName','partsList')
          formData.append('fieldVal',strTemp)
          formData.append('fileName',fileName)
          this.loading=true
          // 保存文件，需要返回修改后的图片地址保存数据，并且进行赋值
          this.$requestFile.post('/addPictureOperateGuideBook',formData).
          then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }else {
              if (result.data===null){
                alert("程序出现异常，请联系管理员")
              }
              else {
                //修改列表中的数据
                //修改主表中的数据和记录的保存数据
                this.tableData[this.tableDataScope.$index].partsList=result.data
                this.tableDataScope.row.partsList=result.data
                //修改作业指导书列表中的内容
                this.partsListData[this.partsListScope.$index].imageList=pictureName
                //组合走马灯的照片
                let pictureTemp=pictureName.split('|*|')
                this.itemView=[]
                for (let i = 0; i < pictureTemp.length-1; i++) {
                  let temp=filepath+pictureTemp[i]
                  this.itemView.push(temp)
                }
              }
              this.loading=false
            }
          })

    },
    //上传文件的函数(上传图片，视频，是作业指导书中的）
    saveFileAnnex(file, fileList){
      this.loading=false
      console.log(fileList)
      if (this.editBookUse===4){
        //是对图片的操作
        const formData = new FormData()
        //1.新生成一个文件名称,并且把文件名称的后缀添加上
        let fileName=this.generateUniqueId()+'.'+file.name.split('.')[file.name.split('.').length-1]
        //2.记录一个新的图片名称
        let pictureName=''
        //把文件数据放进去
        file.name=fileName
        //把图片加入到自己的图片列表中，好像没有用
        this.PictureList.push(file)
        formData.append('file', file.raw)
        //把原来的图片字符串放进去，作为修改用
        //把数据整合到作业指导书的内容中
        //先判断原来的数据是否有图片
        if (this.editBookScope.row.pictureList.includes('undefined')){
          //原来没有图片，需要现在全新生成
          pictureName=fileName+'|*|'
        }
        else {
          //原来已经有图片了
          pictureName=this.editBookScope.row.pictureList+fileName+'|*|'
        }
        //重新组合作业指导书的文本内容。
        //组合数据
        //向总数据中进行组合
        let temp=_.cloneDeep(this.workBook)
        //把新的图片字符串赋值
        temp[this.editBookScope.$index].pictureList=pictureName
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','workBook')
        formData.append('fieldVal',strTemp)
        formData.append('fileName',fileName)
        this.loading=true
        // 保存文件，需要返回修改后的图片地址保存数据，并且进行赋值
        this.$requestFile.post('/addPictureOperateGuideBook',formData).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            if (result.data===null){
              alert("程序出现异常，请联系管理员")
            }
            else {
              //修改列表中的数据
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].workBook=result.data
              this.tableDataScope.row.workBook=result.data
              //修改作业指导书列表中的内容
              this.workBook[this.editBookScope.$index].pictureList=pictureName
              //组合走马灯的照片
              let pictureTemp=pictureName.split('|*|')
              this.itemView=[]
              for (let i = 0; i < pictureTemp.length-1; i++) {
                let temp=filepath+pictureTemp[i]
                this.itemView.push(temp)
              }
            }
            this.loading=false
          }
        })
      }
      else if (this.editBookUse===5){
        //是编辑视频
        const formData = new FormData()
        //1.新生成一个文件名称,并且把文件名称的后缀添加上
        let fileName=this.generateUniqueId()+'.'+file.name.split('.')[file.name.split('.').length-1]
        //2.记录一个新的视频名称
        let pictureName=''
        //把文件数据放进去（新的文件名称
        file.name=fileName
        //把图片加入到自己的图片列表中，好像没有用
        this.PictureList.push(file)
        formData.append('file', file.raw)
        //把原来的视频字符串放进去，作为修改用
        //把数据整合到作业指导书的内容中
        //先判断原来的数据是否有视频
        if (this.editBookScope.row.videoList.includes('undefined')){
          //原来没有图片，需要现在全新生成
          pictureName=fileName+'|*|'
        }
        else {
          //原来已经有视频了
          pictureName=this.editBookScope.row.videoList+fileName+'|*|'
        }
        //重新组合作业指导书的文本内容。
        //组合数据
        //向总数据中进行组合
        let temp=_.cloneDeep(this.workBook)
        //把新的视频字符串赋值
        temp[this.editBookScope.$index].videoList=pictureName
        //组合成为文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
              +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
              +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','workBook')
        formData.append('fieldVal',strTemp)
        formData.append('fileName',fileName)

        //打开忙加载
        this.loading=true
        // 保存文件，需要返回修改后的图片地址保存数据，并且进行赋值
        this.$requestFile.post('/addPictureOperateGuideBook',formData).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            if (result.data===null){
              alert("程序出现异常，请联系管理员")
            }else {
              //修改列表中的数据
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].workBook=result.data
              this.tableDataScope.row.workBook=result.data
              //修改作业指导书列表中的内容
              this.workBook[this.editBookScope.$index].videoList=pictureName
              //组合视频走马灯的视频
              if (this.editBookScope.row.videoList.includes('undefined')){
                this.itemViewVideo=[]
              }
              else {
                let pictureTemp=this.editBookScope.row.videoList.split('|*|')
                this.itemViewVideo=[]
                for (let i = 0; i < pictureTemp.length-1; i++) {
                  let temp=filepath+pictureTemp[i]
                  this.itemViewVideo.push(temp)
                }
              }
              //关闭忙加载
              this.loading=false
            }
          }
        })
      }

    },
    //点击查看照片的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogPictureAnnex = true;
    },
    //单击走马灯上的照片，图片放大方法
    handleImageClick(item){
      this.dialogImageUrl=item
      this.dialogPictureAnnex=true
    },
    //点击图片下载按钮
    handleDownload(file) {
      //向后端发送请求，下载文件
      this.$request.get('/operateGuideBookDownload?fileName=' + encodeURIComponent(file.name)).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }
        else {
          let base64Data = 'data:application/octet-stream;base64,' + result.data//
          // 创建一个Blob对象
          let blob = this.dataURItoBlob(base64Data);
          // 触发下载
          this.downloadBlob(blob, file.name);
        }
      }).catch(error => {
        // 处理请求错误
        console.error("请求出错", error);
      })
    },
    //照片\视频移除的函数(作业指导书中的）
    handleRemove(file) {
      //判断用户是要删除哪里的图片
        if (this.editBookUse===4){
            //是装配作业指导书中的图片
            //对图片列表中的信息进行整合
            const index = this.PictureList.findIndex(item => item.name === file.name);
            this.PictureList.splice(index,1)
            //重新组合作业指导书的文本内容。
            //组合数据
            //向总数据中进行组合
            let temp=_.cloneDeep(this.workBook)
            //把新的图片字符串赋值
            temp[this.editBookScope.$index].pictureList=this.editBookScope.row.pictureList.replace(file.name+'|*|','')
            //判断一下，是不是删除后为空了，如果是，就设置为undefined
            if (temp[this.editBookScope.$index].pictureList===''){
              temp[this.editBookScope.$index].pictureList='undefined|*|'
            }
            //组合成为作业指导书的文本数据，用的方法是，先把每一条的数据组合起来。
            let strTemp=''//组合的临时变量,用在向后端保存数据的变量
            for (let i = 0; i < temp.length; i++) {
              //组合自己每一条的变量
              let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
                  +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
                  +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
              strTemp=strTemp+itemStr+'|-|'
            }
            this.loading=true
            // 发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
            this.$request.post('/operateGuideBookPictureRemove',{
              id:this.tableDataScope.row.id,
              fieldName:'workBook',
              filedVal:strTemp,
              pictureName:file.name
            }).
            then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }
              else {
                if (result.data==='删除文件时出错'){
                  alert("删除文件出错，请联系管理员")
                }else {
                  //修改列表中的数据
                  //修改主表中的数据和记录的保存数据
                  this.tableData[this.tableDataScope.$index].workBook=result.data
                  this.tableDataScope.row.workBook=result.data
                  //组合走马灯的照片
                  if (temp[this.editBookScope.$index].pictureList.includes('undefined')){
                    this.itemView=[]
                  }
                  else {
                    this.itemView=[]
                    let tempView=temp[this.editBookScope.$index].pictureList.split('|*|')
                    for (let i = 0; i < tempView.length-1; i++) {
                      this.itemView.push(filepath+tempView[i])
                    }
                  }
                  this.loading=false
                }
              }
            })
        }
        else if (this.editBookUse===5){
          //是装配作业指导书的视频
          //对视频列表中的信息进行整合
          const index = this.videoList.findIndex(item => item.name === file.name);
          this.videoList.splice(index,1)
          //重新组合作业指导书的文本内容。
          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          //把新的图片字符串赋值
          temp[this.editBookScope.$index].videoList=this.editBookScope.row.videoList.replace(file.name+'|*|','')
          //判断一下，是不是删除后为空了，如果是，就设置为undefined
          if (temp[this.editBookScope.$index].videoList===''){
            temp[this.editBookScope.$index].videoList='undefined|*|'
          }
          //组合成为作业指导书的文本数据，用的方法是，先把每一条的数据组合起来。
          let strTemp=''//组合的临时变量,用在向后端保存数据的变量
          for (let i = 0; i < temp.length; i++) {
            //组合自己每一条的变量
            let itemStr=temp[i].work+'|%|'+temp[i].problem+'|%|'+temp[i].inspect+'|%|'+temp[i].spendTime
                +'|%|'+temp[i].controlPlan+'|%|'+temp[i].toll+'|%|'+temp[i].accessories+'|%|'+temp[i].device
                +'|%|'+temp[i].pictureList+'|%|'+temp[i].videoList+'|%|'
            strTemp=strTemp+itemStr+'|-|'
          }
          // 发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
          this.loading=true
          this.$request.post('/operateGuideBookPictureRemove',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            filedVal:strTemp,
            pictureName:file.name
          }).
          then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }
            else {
              if (result.data==='删除文件时出错'){
                alert("删除文件出错，请联系管理员")
              }
              else {
                //修改列表中的数据
                //修改主表中的数据和记录的保存数据
                this.tableData[this.tableDataScope.$index].workBook=result.data
                this.tableDataScope.row.workBook=result.data
                //组合走马灯的视频
                //修改作业指导书列表中的内容
                this.workBook[this.editBookScope.$index].videoList=temp[this.editBookScope.$index].videoList
                if (this.workBook[this.editBookScope.$index].videoList.includes('undefined')){
                  this.itemViewVideo=[]
                }
                else {
                  let pictureTemp=this.workBook[this.editBookScope.$index].videoList.split('|*|')
                  this.itemViewVideo=[]
                  for (let i = 0; i < pictureTemp.length-1; i++) {
                    let temp=filepath+pictureTemp[i]
                    this.itemViewVideo.push(temp)
                  }
                }
                this.loading=false
              }
            }
          })
        }

    },
    //照片\视频移除的函数(零部件列表中的）
    handleRemovePart(file) {
        //是装配作业指导书中的图片
        //对图片列表中的信息进行整合
        const index = this.PictureList.findIndex(item => item.name === file.name);
        this.PictureList.splice(index,1)
        //重新组合作业指导书的文本内容。
        //组合数据
        //向总数据中进行组合
        let temp=_.cloneDeep(this.partsListData)
        //把新的图片字符串赋值
        temp[this.partsListScope.$index].imageList=this.partsListScope.row.imageList.replace(file.name+'|*|','')
        //判断一下，是不是删除后为空了，如果是，就设置为undefined
        if (temp[this.partsListScope.$index].imageList===''){
          temp[this.partsListScope.$index].imageList='undefined|*|'
        }
        //组合成为作业指导书的文本数据，用的方法是，先把每一条的数据组合起来。
        let strTemp=''//组合的临时变量,用在向后端保存数据的变量
        for (let i = 0; i < temp.length; i++) {
          //组合自己每一条的变量
          let itemStr=temp[i].mapId+'|%|'+temp[i].stepNum+'|%|'+temp[i].partId+'|%|'+temp[i].partName
              +'|%|'+temp[i].partNum+'|%|'+temp[i].special+'|%|'+temp[i].endDate+'|%|'+temp[i].endName
              +'|%|'+temp[i].imageList+'|%|'+temp[i].reserve1+'|%|'+temp[i].reserve2+'|%|'+temp[i].reserve3+'|%|'
          strTemp=strTemp+itemStr+'|-|'
        }
        this.loading=true
        // 发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
        this.$request.post('/operateGuideBookPictureRemove',{
          id:this.tableDataScope.row.id,
          fieldName:'partsList',
          filedVal:strTemp,
          pictureName:file.name
        }).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }
          else {
            if (result.data==='删除文件时出错'){
              alert("删除文件出错，请联系管理员")
            }else {
              //修改列表中的数据
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].partsList=result.data
              this.tableDataScope.row.partsList=result.data
              //组合走马灯的照片
              if (temp[this.partsListScope.$index].imageList.includes('undefined')){
                this.itemView=[]
              }
              else {
                this.itemView=[]
                let tempView=temp[this.partsListScope.$index].imageList.split('|*|')
                console.log(tempView,'测试')
                for (let i = 0; i < tempView.length-1; i++) {
                  this.itemView.push(filepath+tempView[i])
                }
              }
              this.loading=false
            }
          }
        })


    },
    // 辅助函数：将Base64编码的字符串转换为Blob对象
    dataURItoBlob(dataURI) {
      // 分离出头部信息,得到数据部分
      let byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // 写入数组缓冲区
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {type:mimeString});
    },
    // 辅助函数：触发Blob对象的下载
    downloadBlob(blob, fileName) {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    },
    //用户点击的是看图片还是看视频，进行元素的切换
    videoAndImage(doe){
      if (doe===1){
        // 用户要看图像
        this.editVideoAndImageUse=1;
        this.videoAndImage1='#0269fa'
        this.videoAndImageColor1='white'

        this.videoAndImage2='white'
        this.videoAndImageColor2=''
      }
      else if (doe===2){
        // 用户要看视频
        this.editVideoAndImageUse=2;
        this.videoAndImage2='#0269fa'
        this.videoAndImageColor2='white'

        this.videoAndImage1='white'
        this.videoAndImageColor1=''
      }
    },
    //用户点击的是看作业指导书中的哪个数据，表头的上面的列表切换。
    workBookHeard(doe){
      this.workBookHeardUse=doe
      //图片、视频展示清空
      this.itemView=[]
      this.itemViewVideo=[]
      if (doe===1){
        this.workBookHeard1='#0269fa'
        this.workBookHeardColour1='white'

        this.workBookHeard2=''
        this.workBookHeardColour2=''

        this.workBookHeard3=''
        this.workBookHeardColour3=''

        this.workBookHeard4=''
        this.workBookHeardColour4=''
      }
      else if (doe===2){
        this.workBookHeard1=''
        this.workBookHeardColour1=''

        this.workBookHeard2='#0269fa'
        this.workBookHeardColour2='white'

        this.workBookHeard3=''
        this.workBookHeardColour3=''

        this.workBookHeard4=''
        this.workBookHeardColour4=''
      }
      else if (doe===3){
        this.workBookHeard1=''
        this.workBookHeardColour1=''

        this.workBookHeard2=''
        this.workBookHeardColour2=''

        this.workBookHeard3='#0269fa'
        this.workBookHeardColour3='white'

        this.workBookHeard4=''
        this.workBookHeardColour4=''
      }
      //显示工时直方图
      else if (doe===4){
        this.workBookHeard1=''
        this.workBookHeardColour1=''

        this.workBookHeard2=''
        this.workBookHeardColour2=''

        this.workBookHeard3=''
        this.workBookHeardColour3=''

        this.workBookHeard4='#0269fa'
        this.workBookHeardColour4='white'

      }
    },
    //对作业指导书行单击的时候展开栏的时候触发的函数，调动展开的内容展示,主要是调动控制计划。
    workBookRowClick(row){
      //去后端查询控制计划关联的内容
      if (row.controlPlan!=='-1'){
        //发送到后端进行查询
        this.$request.post('/inquiryControlPlanAssociationByOperateGuideBook',row.controlPlan)
            .then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }
          else {
            this.isControlPlanLoad=false
            this.controlPlanData=result.data
            this.isControlPlanLoad=true
          }
        })
      }
    },
    //对控制计划部分多选的时候，产生的变化。
    controlPlanSelectionChange(val){
      this.controlPlanSelection = val;
      //对作业指导书中控制计划中的内容进行组合。
    },
    loadSelect(){
      //看是不是前期已经有关联项目
      if (this.editBookScope.row.controlPlan!=='-1'){
        //分割成数组，包含了控制计划中的id关联信息
        const controlTemp=this.editBookScope.row.controlPlan.split('|*|')
        console.log(controlTemp)
        console.log(this.tableDataControl)
        //记录找到的控制计划的列表
        let controlList=[]
        for (let i = 0; i < controlTemp.length-1; i++) {
          const index = this.tableDataControl.findIndex(item => item.id ===Number(controlTemp[i]))
          console.log(index)
          if (index!==-1){
            controlList.push(this.tableDataControl[index])
          }
        }
        //把已经选择项显示在数据列表上
        this.toggleSelection(controlList)
      }
    },
    //对控制计划部分，回填已经选择的项目的函数
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //点击编辑零部件明细：1.编辑，2.向下插入；3.删除；4：图片；5：视频
    editPartsList(doe,scope){
      this.partsListDoe=doe
      this.partsListScope=scope
      //点击弹窗
      //是编辑
      if (doe===1){
        //数据赋值
        this.partsListFrom=_.cloneDeep(scope.row)
        this.partsListDialog=true
      }
      //是向下插入
      else if (doe===2){
        //数据初始化
        this.partsListFrom={
          // 图示代码
          mapId:'',
          // 工步号
          stepNum:'',
          // 零部件编号
          partId:'',
          // 零部件名称
          partName:'',
          // 数量
          partNum:'',
          // 特殊特性
          special:'',
          // 最后编辑时间
          endDate:'',
          //最后编辑人
          endName: '',
          // 图片列表
          imageList:'',
          // 预留
          reserve1:'',
          // 预留
          reserve2:'',
          // 预留
          reserve3:'',
        }
        this.titleUse='您正在向下插入一条零件信息'
        this.partsListDialog=true
      }
      //是删除
      else if (doe===3){
        //数据赋值
        this.partsListFrom=_.cloneDeep(scope.row)
        this.titleUse='您正在删除本条数据'
        this.partsListDialog=true
      }
      //是上传图片
      else if (doe===4){
        this.titleUse='上传图片（零部件部分）'
        //组合照片的数据
        if (this.partsListScope.row.imageList.includes('undefined')){
          //没有图片信息
          this.PictureList = []
        }
        else {
          this.PictureList = []
          const temp1 = this.partsListScope.row.imageList.split('|*|')
          for (let i = 0; i < temp1.length - 1; i++) {
            let temp2 = {
              name: temp1[i],
              percentage: 0,
              raw: File,
              size: 0,
              status: null,
              uid: null,
              url: filepath + temp1[i]
            }
            this.PictureList.push(temp2)
          }
        }
        this.fileType='image/jpeg, image/png'
        this.dialogPicturePart=true
      }
      // 是新建
      else if (doe===5){
        if (this.treeNode===null){
          alert('请选择工序')
          return
        }
        else if (this.tableDataScope===null){
          alert('请选择作业指导书')
          return;
        }
        //数据初始化
        this.partsListFrom={
          // 图示代码
          mapId:'',
          // 工步号
          stepNum:'',
          // 零部件编号
          partId:'',
          // 零部件名称
          partName:'',
          // 数量
          partNum:'',
          // 特殊特性
          special:'',
          // 最后编辑时间
          endDate:'',
          //最后编辑人
          endName: '',
          // 图片列表
          imageList:'',
          // 预留
          reserve1:'',
          // 预留
          reserve2:'',
          // 预留
          reserve3:'',
        }
        this.titleUse='您正在新建一条零件信息'
        this.partsListDialog=true
      }
    },
    //点击编辑零部件明细弹窗的确定按钮，保存数据
    partsListEditClick(){
      //数据校验
      if (this.partsListFrom.partName===''){
        alert("请填写零部件名称")
        return
      }
      else if (this.partsListFrom.partNum<=0){
        alert('请输入正确的数量')
        return;
      }

      //根据不同情况组合数据
      let str=''
      //组合最后编辑时间
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      this.partsListFrom.editTime=`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      //组合最后编辑人
      this.partsListFrom.endName=this.useName

      //是新建
      if (this.partsListDoe===5){
        //直接组合
        //给图片赋值为空
        this.partsListFrom.imageList='undefined|*|'
        str=this.partsListFrom.mapId+'|%|'+
            this.partsListFrom.stepNum+'|%|'+
            this.partsListFrom.partId+'|%|'+
            this.partsListFrom.partName+'|%|'+
            this.partsListFrom.partNum+'|%|'+
            this.partsListFrom.special+'|%|'+
            this.partsListFrom.endDate+'|%|'+
            this.partsListFrom.endName+'|%|'+
            this.partsListFrom.imageList+'|%|'+
            this.partsListFrom.reserve1+'|%|'+
            this.partsListFrom.reserve2+'|%|'+
            this.partsListFrom.reserve3+'|-|'
      }
      //是编辑
      else if (this.partsListDoe===1){
        //组合数据
        let strTemp=this.partsListFrom.mapId+'|%|'+
            this.partsListFrom.stepNum+'|%|'+
            this.partsListFrom.partId+'|%|'+
            this.partsListFrom.partName+'|%|'+
            this.partsListFrom.partNum+'|%|'+
            this.partsListFrom.special+'|%|'+
            this.partsListFrom.endDate+'|%|'+
            this.partsListFrom.endName+'|%|'+
            this.partsListFrom.imageList+'|%|'+
            this.partsListFrom.reserve1+'|%|'+
            this.partsListFrom.reserve2+'|%|'+
            this.partsListFrom.reserve3
        //直接对总表进行操作
        let partList=this.tableData[this.tableDataScope.$index].partsList.split('|-|')
        //更换数据
        partList[this.partsListScope.$index]=strTemp
        //组合大数据
        str=''
        for (let i = 0; i < partList.length-1; i++) {
          str=str+partList[i]+'|-|'
        }
      }
      //是向下插入
      else if (this.partsListDoe===2){
        //组合数据
        this.partsListFrom.imageList='undefined|*|'
        let strTemp=this.partsListFrom.mapId+'|%|'+
            this.partsListFrom.stepNum+'|%|'+
            this.partsListFrom.partId+'|%|'+
            this.partsListFrom.partName+'|%|'+
            this.partsListFrom.partNum+'|%|'+
            this.partsListFrom.special+'|%|'+
            this.partsListFrom.endDate+'|%|'+
            this.partsListFrom.endName+'|%|'+
            this.partsListFrom.imageList+'|%|'+
            this.partsListFrom.reserve1+'|%|'+
            this.partsListFrom.reserve2+'|%|'+
            this.partsListFrom.reserve3
        //直接对总表进行操作
        let partList=this.tableData[this.tableDataScope.$index].partsList.split('|-|')
        //插入数据
        partList.splice(this.partsListScope.$index+1,0,strTemp)
        //组合大数据
        str=''
        for (let i = 0; i < partList.length-1; i++) {
          str=str+partList[i]+'|-|'
        }
      }
      //是删除本行
      else if (this.partsListDoe===3){
        //直接对总表进行操作
        let partList=this.tableData[this.tableDataScope.$index].partsList.split('|-|')
        //插入数据
        partList.splice(this.partsListScope.$index,1)
        //组合大数据
        str=''
        for (let i = 0; i < partList.length-1; i++) {
          str=str+partList[i]+'|-|'
        }
      }

      if (str===''){
        alert("数据出现异常，请联系管理员")
      }
      else {
        //向后端发送请求
        this.$request.post('operateGuideBookOneFiledById',{
          id:this.tableDataScope.row.id,
          filedName:'partsList',
          filedVal:str,
        })
            .then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            //修改大表数据
            this.tableData[this.tableDataScope.$index].partsList=str
            //修改临时数据的内容
            this.tableDataScope.row.partsList=str
            this.tableDataTemp.partsList=str
            //新组合零部件明细
            this.partsListData=[]
            let partsTemp=str.split('|-|')
            for (let i = 0; i < partsTemp.length-1; i++) {
              let partsItem=partsTemp[i].split('|%|')
              let temp={
                // 图示代码
                mapId:partsItem[0],
                // 工步号
                stepNum:partsItem[1],
                // 零部件编号
                partId:partsItem[2],
                // 零部件名称
                partName:partsItem[3],
                // 数量
                partNum:partsItem[4],
                // 特殊特性
                special:partsItem[5],
                // 最后编辑时间
                endDate:partsItem[6],
                // 最后编辑人
                endName: partsItem[7],
                // 图片列表
                imageList:partsItem[8],
                // 预留
                reserve1:partsItem[9],
                // 预留
                reserve2:partsItem[10],
                // 预留
                reserve3:partsItem[11],
              }
              this.partsListData.push(temp)
            }
            this.partsListDialog=false
          }
        })

      }
    },
    //零部件的行上单击
    partsListClick(row){
      //组合图片数据
      //组合走马灯的照片
      if (row.imageList.includes('undefined')){
        this.itemView=[]
      }
      else {
        let pictureTemp=row.imageList.split('|*|')
        this.itemView=[]
        for (let i = 0; i < pictureTemp.length-1; i++) {
          let temp=filepath+pictureTemp[i]
          this.itemView.push(temp)
        }
      }
    },
    //编审批的函数
    ratifyClick(doe){
      //是审核
      if (doe===1){
        if (this.tableDataTemp.examineUse.includes(this.useName)){
          //修改数据
         let str=this.useName+'/已审批'
          //向后端传递数据，修改一个字段
          //向后端发送请求
          this.$request.post('operateGuideBookOneFiledById',{
            id:this.tableDataScope.row.id,
            filedName:'examineUse',
            filedVal:str,
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                }else {
                  //修改大表数据
                  this.tableData[this.tableDataScope.$index].examineUse=str
                  //修改临时数据的内容
                  this.tableDataScope.row.examineUse=str
                  this.tableDataTemp.examineUse=str
                  alert("已经审批完成")
                }
              })
        }
        else {
          alert("您不可以审批")
        }
      }
      //是批准
      else if (doe===2){
        if (this.tableDataTemp.ratifyUse.includes(this.useName)){
          //修改数据
          let str=this.useName+'/已审批'
          //向后端传递数据，修改一个字段
          //向后端发送请求
          this.$request.post('operateGuideBookOneFiledById',{
            id:this.tableDataScope.row.id,
            filedName:'ratifyUse',
            filedVal:str,
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                }else {
                  //修改大表数据
                  this.tableData[this.tableDataScope.$index].ratifyUse=str
                  //修改临时数据的内容
                  this.tableDataScope.row.ratifyUse=str
                  this.tableDataTemp.ratifyUse=str
                  alert("已经审批完成")
                }
              })
        }
        else {
          alert("您不可以审批")
        }
      }
      //是会签
      else if (doe===3){
        if (this.tableDataTemp.countersignUse.includes(this.useName)){
          //修改数据
          let str=this.useName+'/已审批'
          //向后端传递数据，修改一个字段
          //向后端发送请求
          this.$request.post('operateGuideBookOneFiledById',{
            id:this.tableDataScope.row.id,
            filedName:'countersignUse',
            filedVal:str,
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                }else {
                  //修改大表数据
                  this.tableData[this.tableDataScope.$index].countersignUse=str
                  //修改临时数据的内容
                  this.tableDataScope.row.countersignUse=str
                  this.tableDataTemp.countersignUse=str
                  alert("已经审批完成")
                }
              })
        }
        else {
          alert("您不可以审批")
        }
      }
    },
    //画工时的直方图
    initChart() {
      if (this.$refs.myChartBor) {
        //组合数据
        for (let i = 0; i < this.workBook.length; i++) {
          this.optionBor.xAxis[0].data[i]=i+1
          this.optionBor.series[0].data[i]=this.workBook[i].spendTime
        }
        this.chartUserBor=echarts.init(this.$refs.myChartBor)
        this.chartUserBor.setOption(this.optionBor)
      } else {
        console.error('DOM element not found for chart initialization');
      }
    },
    //点击编辑实现案例库：1.新增、2.编辑、3.删除、4.上传图片、5.上传视频、6.向下插入；
    caseUseShow(doe,scope){
      this.caseUseDoe=doe
      this.caseUseScope=scope
      //是新建/新增一条
      if (doe===1){
        if (this.tableDataScope===null){
          this.$message.error('您未选择工序，或本工序为空，请选择工序')
          return
        }
        //弹窗打开，就是一段文字的录入
        this.caseUseDialog=true
        this.titleUse='您正在新增一条失效案例库'
        this.caseUseData=[{
          id: '1',
          caseUse: '',
          editName: '',
          editDate: '',
          pictureList: '',
          videoList: '',
          reserve1: '',
          reserve2: '',
          reserve3: ''
        }]
      }
      //是编辑一条
      else if (doe===2){
        //把值赋给文本框
        this.inputTextCaseUse=_.cloneDeep(scope.row.caseUse)
        this.titleUse='您正在编辑本条失效信息'
        this.caseUseDialog=true
      }
      //是删除一个失效案例
      else if (doe===3){
        this.inputTextCaseUse=scope.row.caseUse
        this.titleUse='您正在删除本条失效案例'
        this.caseUseDialog=true
      }
      //是向下插入一条
      else if (doe===6){
        this.inputTextCaseUse=''
        this.titleUse='您正在向下插入一条失效案例'
        this.caseUseDialog=true
      }
    },
    //点击在《失效案例库》中的编辑窗口确定按钮
    caseUseEdit(){
      let str
      //新增一条实现案例（是本序没有，空白新增）如果以前有失效案例，这个新增按钮都没有,不会显示
      if (this.inputTextCaseUse===''  || this.inputTextCaseUse===undefined){
        this.$message.error('您未输入失效信息，请输入后点击确定')
        return
      }
      //是新增一条失效案例
      if (this.caseUseDoe===1){
        //组合数据
        //得到新输入的数据
        this.caseUseData[0].caseUse=this.inputTextCaseUse
        this.caseUseData[0].editName=this.useName
        this.caseUseData[0].editDate=this.nowDateStr()

      }
      //编辑一条失效案例
      else if (this.caseUseDoe===2){
        //组合新的数据
        this.caseUseData[this.caseUseScope.$index].caseUse=this.inputTextCaseUse
        this.caseUseData[this.caseUseScope.$index].editName=this.useName
        this.caseUseData[this.caseUseScope.$index].editDate=this.nowDateStr()

      }
      //是向删除一条失效案例
      else if (this.caseUseDoe===3){
        this.caseUseData.splice(this.caseUseScope.$index,1)
        console.log(this.caseUseData)
      }
      //向下插入一条信息
      else if (this.caseUseDoe===6){
        let temp={
          id: '-1',
            caseUse: this.inputTextCaseUse,
            editName: this.useName,
            editDate: this.nowDateStr(),
            pictureList: '',
            videoList: '',
            reserve1: '',
            reserve2: '',
            reserve3: ''
        }
        this.caseUseData.splice(this.caseUseScope.$index+1,0,temp)
      }

      // 获取对象的所有键，并过滤掉 'id' 键
      str = this.caseUseData.map(obj => {
        return Object.keys(obj)
            .filter(key => key !== 'id')  // 排除 id 键
            .map(key => obj[key])         // 获取每个键的值
            .join('|%|');                 // 使用 '|%|' 连接成字符串
      }).join('|-|');// 使用 '|-|' 连接每个对象的字符串

      //向后端发送请求，用的是修改一个字段的端口
      this.$request.post('operateGuideBookOneFiledById',{
        id:this.tableDataScope.row.id,
        filedName:'caseUse',
        filedVal:str,
      })
          .then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }else {
              //修改大表数据
              this.tableData[this.tableDataScope.$index].caseUse=str
              //修改临时数据的内容
              this.tableDataScope.row.caseUse=str
              this.tableDataTemp.caseUse=str
              //新组合失效案例库
              //对失效案例库列表进行组合
              this.caseUseData=[]
              let caseUseTemp=this.tableData[this.tableDataScope.$index].caseUse.split('|-|')
              if (caseUseTemp.length===0){
                caseUseTemp.push(this.tableData[this.tableDataScope.$index].caseUse)
              }
              for (let i = 0; i < caseUseTemp.length; i++) {
                let caseUseItem=caseUseTemp[i].split('|%|')
                let temp={
                  id: i,
                  caseUse: caseUseItem[0],
                  editName: caseUseItem[1],
                  editDate: caseUseItem[2],
                  pictureList: caseUseItem[3],
                  videoList: caseUseItem[4],
                  reserve1: caseUseItem[5],
                  reserve2: caseUseItem[6],
                  reserve3: caseUseItem[7]
                }
                this.caseUseData.push(temp)
              }
              this.caseUseDialog=false
            }
          })
    },
  },
  mounted() {
    //查询用户信息
    this.inquiry()
    this.workBook=[]
    this.partsListData=[]
    this.caseUseData=[]
    // 直方图的数据归零
    this.optionBor= {
      tooltip: {
        trigger: 'axis',
          axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top:'3%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
          yAxis: [
        {
          type: 'value'
        }
      ],
          series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data:[]
        }
      ]
    }
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

</style>